<template>
    <div>
        <div style="width: 1000px;">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">

                <el-table-column
                        prop="grade"
                        label="综合评级"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="司机姓名"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="goodCommand"
                        label="好评数"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="appreciate"
                        label="点赞数"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="historyHonor"
                        label="历史荣誉"
                        width="180">
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            tableRowClassName({row, rowIndex}) {
                console.log(row);
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        },
        data() {
            return {
                tableData: [{
                    grade: '★★★★★',
                    name: '张广',
                    goodCommand: '20',
                    appreciate: '15',
                    historyHonor: '准时达人'
                }, {
                    grade: '★★★',
                    name: '李云',
                    goodCommand: '19',
                    appreciate: '13',
                    historyHonor: '准时达人'
                }, {
                    grade: '★☆',
                    name: 'sun强',
                    goodCommand: '17',
                    appreciate: '12',
                    historyHonor: '准时达人'
                }, {
                    grade: '☆',
                    name: '刘启云',
                    goodCommand: '13',
                    appreciate: '10',
                    historyHonor: '准时达人'
                }, {
                    grade: '☆',
                    name: '李达',
                    goodCommand: '2',
                    appreciate: '0',
                    historyHonor: '无'
                }
                ]
            }
        }
    }
</script>

<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>